<template>
    <div class="ppszg">
        <div class="ppszg-text">
            <span class="left-text">品牌商直供</span>
            <span class="right-text" @click="gotomoreppszg">更多品牌商></span>
        </div>

        <div class="brand-grid">
            <div class="brand-item" v-for="brand in brandList" :key="brand.id"  @click="goToBrandGoods(brand.id)" >
                <img :src="brand.picUrl" class="brand-image" :alt="brand.name" />
                <div class="brand-name">{{ brand.name }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHomeData } from '@/api/home'
import { useRouter } from 'vue-router'

const brandList = ref([])
const router = useRouter()
onMounted(async () => {
    const response = await getHomeData()
    if (response.errno === 0 && response.data.brandList) {
        brandList.value = response.data.brandList.slice(0, 4)
    }
})
const goToBrandGoods = (brandId) => {
  router.push({
    path: '/goods/ppszg',
    query: { brandId }
  })
}
const gotomoreppszg = () => {
  router.push({
    path: '/goods/moreppszg'
  })
}
</script>

<style scoped>
.ppszg-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 10px;
    background: white;
}

.left-text {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.right-text {
    font-size: 12px;
    color: #999;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    background: white;
}

.brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    background: #f7f7f7;
}

.brand-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.brand-name {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #333;
}
</style>